import { FC, useEffect } from "react";
import { css } from "@emotion/css";
import { Avatar, Card, Descriptions, Tag } from "@arco-design/web-react";
import { FinalRiskType, VideosType } from "../../api/types/elder-risk.ts";
import dayjs, { Dayjs } from "dayjs";
import { Link } from "../Link";
// import {
//   IconCalendar,
//   IconHeart,
//   IconLocation,
//   IconMobile,
//   IconUser,
// } from "@arco-design/web-react/icon";
import { useQuery } from "react-query";
import { useAPI } from "../../hooks/useAPI.ts";
import { Icon } from "@iconify/react";

export const ElderRiskWarningCard: FC<{
  riskType: FinalRiskType;
  userId: number;
  name: string;
  vitalInfo?: any | null;
  avatarURL?: string;
  videoList?: VideosType[];
  time?: Dayjs | string | number;
  dictLabel?: string;
  refresh?: boolean;
  isNursing?: boolean;
}> = ({
  riskType,
  dictLabel,
  userId,
  name,
  vitalInfo,
  avatarURL,
  time,
  isNursing,
}) => {
    const riskColor =
      {
        [FinalRiskType.RiskMid]: "rgb(var(--warning-6))",
        [FinalRiskType.High]: "rgb(var(--danger-6))",
        [FinalRiskType.RiskNone]: "rgb(var(--success-4))",
      }[riskType] ?? "rgb(var(--warning-6))";
    const avatarBgColor =
      {
        [FinalRiskType.RiskMid]: "#FF7D00",
        [FinalRiskType.High]: "#F53F3F",
        // [FinalRiskType.RiskNone]: "var(--color-neutral-4)",
        [FinalRiskType.RiskNone]: "#4CD263",
      }[riskType] ?? "#FF7D00";
    // const tagColor =
    //   {
    //     [FinalRiskType.RiskMid]: "orange",
    //     [FinalRiskType.High]: "red",
    //     [FinalRiskType.RiskNone]: "green",
    //   }[riskType] ?? "orange";
    const tagText = {
      [FinalRiskType.RiskMid]: "中风险",
      [FinalRiskType.High]: "高风险",
      [FinalRiskType.RiskNone]: "无风险",
    }[riskType];
    // const riskIcon = {
    //   [FinalRiskType.RiskMid]: "tabler:alert-square-rounded",
    //   [FinalRiskType.High]: "tabler:alert-square-rounded-filled",
    //   [FinalRiskType.RiskNone]: "tabler:alert-square-rounded-off"
    // }[riskType];
    const api = useAPI();
    const { data } = useQuery(["query-system-user-info", userId], async () => {
      const response = await api.getSystemUserInfoById(userId!);
      if (!response.data.data) {
        throw new Error("No Data");
      }
      return response.data.data;
    });

    const status = isNursing ? "护理中" : dictLabel === "躺下" ? "休息中" : dictLabel === "走路/站着" || dictLabel === "坐着" ? "活跃" : "外出";

    const statusIcon = {
      "护理中": "tabler:nurse",
      "休息中": "tabler:zzz",
      "活跃": "tabler:stretching-2",
      "外出": "tabler:door"
    }[status];

    const descrip = [
      {
        label: "房间号",
        value: <Tag size="large" icon={<Icon icon="tabler:home" height={16} style={{verticalAlign:"-10%"}} />} bordered>{data?.roomName}</Tag>
      },
      {
        label: "状态",
        value: <Tag size="large" icon={<Icon icon={statusIcon} height={16} style={{verticalAlign:"-10%"}} />} bordered>{status}</Tag>
      },
      {
        label: "风险",
        value: <Tag size="large" color={riskColor} bordered>{tagText}</Tag>
      },
    ]

    useEffect(() => {
      if (!vitalInfo) return; // Do nothing if videoList is empty
    }, []);

    return (
      <>
        <Link
          to={`/homepage/seniorReport/${userId}`}
          style={{ textDecoration: "none" }}
        >
          <Card
            className={css`
            width: 100%;
            height: 130px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 16px;

            > .arco-card-body {
              padding: 0;
              position: relative;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
            }
          `}
            style={{
              border: `1px solid ${riskColor}`,
            }}
          >
            {/* <div
            className={css`
              display: flex;
            `}
          >
            <Tag
              color={tagColor}
              className={css`
                position: absolute;
                top: 0;
                right: 0;
              `}
            >
              {tagText}
            </Tag>
          </div> */}
            <div
              className={css`
              display: flex;
              padding-top: 14px;
              height: 90px;
            `}
            >
              <Avatar size={80} shape="square" autoFixFontSize={false} style={{ backgroundColor: avatarBgColor }}>
                {avatarURL ? <img alt="" src={avatarURL} /> : `${name}`}
              </Avatar>
              <div
                className={css`
                width: 1px;
                height: 75px;
                background-color: var(--color-border-3);
                margin: 4px 12px 0;
              `}
              />
              {/* <div
              className={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2px;
              `}
            > */}
              {/* <div
                className={css`
                  font-size: 32px;
                  font-weight: 400;
                  line-height: 48px;
                `}
              >
                {name}
              </div> */}
              {time ? (
                <div>{dayjs(time).format("YYYY年MM月DD日 HH:mm:ss")}</div>
              ) : null}
              <Descriptions
                layout="vertical"
                title=""
                labelStyle={{ textAlign: 'center' }}
                valueStyle={{ textAlign: 'center' }}
                style={{ flex: 1, marginLeft: 12, marginRight: 24, marginTop: 4 }}
                data={descrip} />
              
              {/* {dictLabel ? (
                <Space size={8}>
                  {
                    <Tag
                      size="large"
                      color={tagColor}
                      bordered
                      icon={
                        <Icon
                          icon="tabler:user"
                          height="13"
                        />
                      }
                    >
                      {name}
                    </Tag>
                  }
                  {
                    <Tag
                      size="large"
                      color={tagColor}
                      bordered
                      icon={
                        <Icon
                          icon={riskIcon}
                          // height="13"
                        />
                      }
                    >
                      {tagText}
                    </Tag>
                  }{isNursing && (
                    <Tag
                      size="large"
                      color={tagColor}
                      bordered
                      icon={
                        <Icon
                          icon="tabler:nurse"
                          height="13"
                        />
                      }
                    >
                      {"护理中"}
                    </Tag>
                  )}
                  {!isNursing && (
                    <Tag
                      size="large"
                      color={tagColor}
                      bordered
                      icon={
                        <Icon
                          icon={`${dictLabel === "躺下"
                            ? "tabler:bed"
                            : dictLabel === "走路/站着" || dictLabel === "坐着"
                              ? "tabler:stretching-2"
                              : "tabler:door"
                            }`}
                          height="13"
                        />
                      }
                    >
                      {dictLabel === "躺下"
                        ? "休息中"
                        : dictLabel === "走路/站着" || dictLabel === "坐着"
                          ? "活跃"
                          : "外出"}
                    </Tag>
                  )}
                </Space>
              ) : null} */}
              {/* </div> */}
            </div>
            {/* <div
            className={css`
              margin-top: 12px;
            `}
          >
            <Descriptions
              colon=" ："
              layout="inline-vertical"
              title=""
              data={[
                {
                  label: (
                    <>
                      <IconLocation style={{ marginRight: "6px" }} />
                      位置
                    </>
                  ),
                  value: `${data?.buildingName || ""} - ${
                    data?.floorName || ""
                  } - ${data?.roomName || ""}`,
                },
                {
                  label: (
                    <>
                      <IconCalendar style={{ marginRight: "6px" }} />
                      年龄
                    </>
                  ),
                  value: `${dayjs().diff(dayjs(data?.birth), "year")}岁`,
                },
                {
                  label: (
                    <>
                      <IconMobile style={{ marginRight: "6px" }} />
                      联系方式
                    </>
                  ),
                  value: `${data?.phonenumber}`,
                },
                {
                  label: (
                    <>
                      <IconUser style={{ marginRight: "6px" }} />
                      性别
                    </>
                  ),
                  value: `${data?.sex === "1" ? "女" : "男"}`,
                },
                {
                  label: (
                    <>
                      <IconHeart style={{ marginRight: "6px" }} />
                      心率
                    </>
                  ),
                  value: vitalInfo
                    ? `${Math.round(vitalInfo?.HealthData?.HeartFreqAverage)} `
                    : "-",
                },
                {
                  label: (
                    <>
                      <IconHeart style={{ marginRight: "6px" }} />
                      呼吸
                    </>
                  ),
                  value: vitalInfo
                    ? `${Math.round(vitalInfo?.HealthData?.BreathFreqAverage)}`
                    : "-",
                },
              ]}
            />
            <div
              className={css`
                display: flex;
                justify-content: end;
                gap: 12px;
                margin-top: 12px;
              `}
            ></div>
          </div> */}
          </Card>
        </Link>
      </>
    );
  };
